import React, { useState, useRef } from 'react';
import { TextInput, StyleSheet, Button, View, Text } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { Tester, TestSuite, TestCase } from '@rnoh/testerino';

const Labels = ['Username', 'Password', 'Firstname', 'Lastname', 'Address', 'Phone', 'Email', 'QQ', 'WeChat', 'Webo'];

export const ScrollToPosition: React.FC = (): JSX.Element => {
    const scrollViewRef = useRef<KeyboardAwareScrollView>(null);
    const [keyboardStatus, setKeyboardStatus] = useState('');

    const handleScrollToPosition = () => {
        scrollViewRef.current?.scrollToPosition(0, 100, true);
    };

    return (
        <Tester style={{ paddingBottom: 80 }}>
            <TestSuite name='KeyboardAwareScrollView 滚动测试'>
                <TestCase
                    itShould={`滚动到指定位置`}
                    tags={['C_API']}
                    initialState={false}
                    arrange={({ setState }) => {
                        return (
                            <>
                                <Text style={styles.statusText}>
                                    键盘状态: {keyboardStatus || '未知'}
                                </Text>
                                <KeyboardAwareScrollView
                                    ref={scrollViewRef}
                                    style={styles.scroll}
                                    contentContainerStyle={styles.contentContainer}
                                    enableOnAndroid={true}
                                    extraHeight={100}
                                    extraScrollHeight={60}
                                    keyboardOpeningTime={0}
                                    keyboardShouldPersistTaps="handled"
                                    enableResetScrollToCoords={false}
                                    onKeyboardDidHide={() => {
                                        setKeyboardStatus('键盘隐藏');
                                    }}
                                    onKeyboardDidShow={() => {
                                        setKeyboardStatus('键盘出现');
                                    }}
                                >
                                    <Button
                                        title={'滚动到位置 (0, 100)'}
                                        onPress={() => {
                                            handleScrollToPosition();
                                            setState(true);
                                        }}
                                    />
                                    <Text style={styles.positionInfo}>
                                        将滚动到位置: x=0, y=100
                                    </Text>
                                    {Labels.map((item, index) => (
                                        <View key={item} style={styles.inputContainer}>
                                            <Text style={styles.label}>{item}:</Text>
                                            <TextInput 
                                                style={styles.input} 
                                                placeholder='请输入' 
                                                placeholderTextColor="#999"
                                            />
                                            <Text style={styles.indexText}>
                                                位置索引: {index}
                                            </Text>
                                        </View>
                                    ))}
                                </KeyboardAwareScrollView>
                            </>
                        );
                    }}
                    assert={async ({ expect, state }) => {
                        expect(state).to.be.true;
                    }}
                />
            </TestSuite>
        </Tester>
    );
};

const styles = StyleSheet.create({
    scroll: {
        backgroundColor: '#f0f0f0',
        height: 500,
    },
    contentContainer: {
        paddingBottom: 150,
    },
    inputContainer: {
        marginBottom: 25,
        paddingHorizontal: 20,
        borderBottomWidth: 1,
        borderBottomColor: '#e0e0e0',
        paddingBottom: 10,
    },
    label: {
        fontSize: 16,
        fontWeight: 'bold',
        marginBottom: 8,
        color: '#333',
    },
    input: {
        width: '100%',
        borderWidth: 1,
        borderColor: '#ccc',
        height: 50,
        borderRadius: 8,
        fontSize: 16,
        paddingHorizontal: 12,
        backgroundColor: '#fff',
        marginBottom: 8,
    },
    indexText: {
        fontSize: 12,
        color: '#666',
        fontStyle: 'italic',
    },
    statusText: {
        textAlign: 'center',
        marginVertical: 10,
        fontWeight: 'bold',
        color: '#2196F3',
        paddingHorizontal: 20,
        fontSize: 16,
    },
    positionInfo: {
        textAlign: 'center',
        marginVertical: 10,
        color: '#FF5722',
        fontWeight: '600',
        paddingHorizontal: 20,
    },
});

export default ScrollToPosition;